<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    

<head><meta name="generator" content="Hexo 3.8.0">
    <meta charset="utf-8">
    <meta name="keywords" content="WebRTC02查基础资料, 炫杉">
    <meta name="description" content="本来第一站是要查资料先了解下知识点的。但是王老师直接就给了我iOS的源码，这样又了Demo对着，了解更好了。不多说了。最近的任务就是多看WebRTC的相关文章。把该知道的多学一点。

服务器Room Server房间服务器。创建、管理通话状">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>WebRTC02查基础资料 | 炫杉</title>
    <link rel="icon" type="image/png" href="/favicon.png">

    <link rel="stylesheet" type="text/css" href="/libs/awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/materialize/css/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/css/my.css">

    <script src="/libs/jquery/jquery-2.2.0.min.js"></script>
<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css">
<link rel="stylesheet" href="/css/prism-line-numbers.css" type="text/css"></head>

</head>

<body>

<header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="container">
            <div class="nav-wrapper">
                <div class="brand-logo">
                    <a href="/" class="waves-effect waves-light">
                        
                        <img src="/medias/logo.png" class="logo-img hide-on-small-only">
                        
                        <span class="logo-span">炫杉</span>
                    </a>
                </div>
                <a href="#" data-activates="mobile-nav" class="button-collapse"><i class="fa fa-navicon"></i></a>
<ul class="right">
    
    <li class="hide-on-med-and-down">
        <a href="/" class="waves-effect waves-light">
            
            <i class="fa fa-home"></i>
            
            <span>Index</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/tags" class="waves-effect waves-light">
            
            <i class="fa fa-tags"></i>
            
            <span>Tags</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/categories" class="waves-effect waves-light">
            
            <i class="fa fa-bookmark"></i>
            
            <span>Categories</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/archives" class="waves-effect waves-light">
            
            <i class="fa fa-archive"></i>
            
            <span>Archives</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/about" class="waves-effect waves-light">
            
            <i class="fa fa-user-circle-o"></i>
            
            <span>About</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="https://oo1.win" class="waves-effect waves-light">
            
            <i class="fa fa-star"></i>
            
            <span>Bookmark</span>
        </a>
    </li>
    
    <li>
        <a id="toggleSearch" class="waves-effect waves-light">
            <i id="searchIcon" class="mdi-action-search"></i>
        </a>
    </li>

</ul>

<div class="side-nav" id="mobile-nav">

    <div class="mobile-head bg-color">
        
        <img src="/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">炫杉</div>
        <div class="logo-desc">
            
            提着鸟笼的老头站在一旁拍我肩膀 我猜他想的应该和我一样
            
        </div>
    </div>

    <ul class="menu-list mobile-menu-list">
        
        <li>
            <a href="/" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-home"></i>
                
                Index
            </a>
        </li>
        
        <li>
            <a href="/tags" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-tags"></i>
                
                Tags
            </a>
        </li>
        
        <li>
            <a href="/categories" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-bookmark"></i>
                
                Categories
            </a>
        </li>
        
        <li>
            <a href="/archives" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-archive"></i>
                
                Archives
            </a>
        </li>
        
        <li>
            <a href="/about" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-user-circle-o"></i>
                
                About
            </a>
        </li>
        
        <li>
            <a href="https://oo1.win" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-star"></i>
                
                Bookmark
            </a>
        </li>
        
        
    </ul>

    <div class="social-link"><a href="https://github.com/ixsim" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
    <i class="fa fa-github"></i>
</a>

<a href="mailto:chenjiayin1990@163.com" class="tooltipped" target="_blank" data-tooltip="邮件:chinalixs@qq.com" data-position="top" data-delay="50">
    <i class="fa fa-envelope-open"></i>
</a>

<a href="http://wpa.qq.com/msgrd?v=3&uin=6956820&site=qq&menu=yes" class="tooltipped" data-tooltip="QQ: 6956820" data-position="top" data-delay="50">
    <i class="fa fa-qq"></i>
</a>
</div>
</div>

            </div>
        </div>

        
    </nav>
</header>



<div class="bg-cover post-cover" style="background-image: url('/medias/featureimages/17.jpg')">
    <div class="container">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <div class="description center-align post-title">
                        WebRTC02查基础资料
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<main class="post-container content">

    
    <link rel="stylesheet" href="/libs/tocbot/tocbot.css">
<style>
    #articleContent h1,
    #articleContent h2,
    #articleContent h3,
    #articleContent h4,
    #articleContent h5,
    #articleContent h6 {
        padding-top: 76px;
        margin-top: -76px;
    }

    #articleContent h1 {
        line-height: 3.5rem;
    }

    #articleContent h2 {
        line-height: 3.2rem;
    }

    #articleContent h3 {
        line-height: 2.8rem;
    }

    #articleContent h4 {
        line-height: 2.5rem;
    }

    #articleContent h5 {
        line-height: 2.2rem;
    }

    #articleContent h6 {
        line-height: 1.9rem;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }

    .toc-widget {
        padding-left: 20px;
    }

    .toc-widget .toc-title {
        margin: 35px 0 15px 0;
        padding-left: 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #toc-content .is-active-link::before {
        background-color: #42b983;
    }
</style>
<div class="row">
    <div class="col s12 m12 l9">
        <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            
            <div class="article-tag">
                
                <a href="/tags/Note/" target="_blank">
                    <span class="chip bg-color">Note</span>
                </a>
                
            </div>
            
            <div class="post-info">
                
                <span class="post-cate">
                    <i class="fa fa-bookmark fa-fw icon-category"></i>
                    
                    <a href="/categories/WebRTC/" class="post-category" target="_blank">
                        WebRTC
                    </a>
                    
                </span>
                

                <span class="post-date">
                    <i class="fa fa-clock-o fa-fw"></i>2018-08-26
                </span>
            </div>
        </div>
        <hr>
        <div class="card-content article-card-content">
            <div id="articleContent">
                <p>本来第一站是要查资料先了解下知识点的。但是王老师直接就给了我iOS的源码，这样又了Demo对着，了解更好了。不多说了。最近的任务就是多看WebRTC的相关文章。把该知道的多学一点。</p>
<a id="more"></a>
<h1 id="服务器"><a href="#服务器" class="headerlink" title="服务器"></a>服务器</h1><h2 id="Room-Server"><a href="#Room-Server" class="headerlink" title="Room Server"></a>Room Server</h2><p>房间服务器。创建、管理通话状态。<br>是双方还是多方通话。加入离开房间等等。</p>
<h2 id="Signaling-Server"><a href="#Signaling-Server" class="headerlink" title="Signaling Server"></a>Signaling Server</h2><p>信令服务器。<br>管理和协助终端建立p2p通话。</p>
<ul>
<li><p>任务</p>
<ul>
<li>控制通信[发起/结束]的连接控制消息。</li>
<li>发生错误时，相互通告</li>
<li>媒体流 元数据【解码器、带宽、媒体类型等等】</li>
<li>两两之间建立安全连接的关键数据</li>
<li>外界能看到的网络上的数据【ip、端口等】</li>
</ul>
</li>
</ul>
<h2 id="STUN-TURN-ICE-Server"><a href="#STUN-TURN-ICE-Server" class="headerlink" title="STUN/ TURN/ ICE Server"></a>STUN/ TURN/ ICE Server</h2><blockquote>
<p>参考阅读：<br><a href="http://www.52im.net/thread-50-1-1.html" target="_blank" rel="noopener">《P2P技术详解(一)：NAT详解——详细原理、P2P简介》</a><br><a href="http://www.52im.net/thread-542-1-1.html" target="_blank" rel="noopener">《P2P技术详解(二)：P2P中的NAT穿越(打洞)方案详解》</a><br><a href="http://www.52im.net/thread-557-1-1.html" target="_blank" rel="noopener">《P2P技术详解(三)：P2P技术之STUN、TURN、ICE详解》</a></p>
</blockquote>
<p>防火墙打洞服务器</p>
<p><img src="http://webrtc.org.cn/wp-content/uploads/2016/06/nat-network.png" alt=""></p>
<p>如图所示，由于有网络防火墙或配置NAT的路由器。导致我们的计算机ip地址不是广域网的ip地址。因此需要打洞～</p>
<ul>
<li>STUN (Simple Traversal of UDP over NATs)<br>NAT的UDP简单穿越</li>
</ul>
<p>确定<strong>内网终端</strong>暴漏在<strong>广域网</strong> 的ip、端口、NAT信息。</p>
<p>协助<strong>不同内网</strong>之间的计算机建立p2p的<strong>UDP通讯</strong></p>
<p>解决了家用路由环境的打洞问题。但是对于大部分企业的网络环境就不是很好了</p>
<blockquote>
<p>为什么呢？企业的网络环境有什么不一样？</p>
</blockquote>
<p>这是就需要TURN协议了。</p>
<ul>
<li>TURN（Traversal Using Relay NAT）<br>允许在TCP或UDP的连线上跨越 NAT 或防火墙.<blockquote>
<p>Relay–中继动作</p>
</blockquote>
</li>
</ul>
<p>Client-Server协议。</p>
<p><strong>【[客户]】</strong>在通讯前先与<strong>服务器</strong>交互，要求<strong>服务器</strong>产生[relay port]<strong>接口</strong>，这就是中继跨越<strong>新地址</strong>。这时<strong>服务器</strong>会建立<strong>[peer]</strong>，即<strong>remote endpoints远方终端</strong>，开始<strong>relay中继</strong>动作。<strong>【[客户端]】</strong>利用<strong>接口</strong>将资料传送至<strong>[peer]</strong>，再由<strong>[peer]</strong>传给另一个<strong>【[终端]】</strong>。通过服务器产生新的<strong>[peer]</strong>来进行数据的中转。</p>
<ul>
<li>ICE协议</li>
</ul>
<p>综合前两种的方案。</p>
<p>通过offer/answer模型建立基于UDP的通讯。 ICE是offer/answer模型的扩展，通过在offer和answer的SDP(Session Description Protocol)里面包含多种IP地址和端口，然后对本地SDP和远程SDP里面的IP地址进行配对，然后通过P2P连通性检查进行连通性测试工作，如果测试通过即表明该传输地址对可以建立连接。其中IP地址和端口（也就是地址）有以下几种：本机地址、通过 STUN服务器反射后获取的server-reflexive地址（内网地址被NAT映射后的地址）、relayed地址（和 TURN转发服务器相对应的地址）及Peer reflexive地址等。</p>
<ul>
<li>概览</li>
</ul>
<table>
<thead>
<tr>
<th>特性</th>
<th>STUN</th>
<th>TURN</th>
<th>ICE</th>
</tr>
</thead>
<tbody>
<tr>
<td>实现复杂度</td>
<td>实现简单</td>
<td>难于实现。TURN的安全性设计增加终端设置的复杂度</td>
<td>一般</td>
</tr>
<tr>
<td>TCP穿透支持</td>
<td>不支持</td>
<td>支持</td>
<td>支持</td>
</tr>
<tr>
<td>对现有设备的要求</td>
<td>要求客户端支持，对现有NAT设备无改动要求，需增加STUN服务器</td>
<td>对现有NAT设备无要求，要求客户端支持，需增加TURN服务器</td>
<td>对NAT设备无要求，支持所有类型的NAT设备。客户端必须支持，网路结构中需增加STUN/TURN服务器</td>
</tr>
<tr>
<td>可扩展性</td>
<td>可扩展性好，与具体协议无关</td>
<td>可扩展性好，与具体协议无关</td>
<td>可扩展性好，与具体协议无关</td>
</tr>
<tr>
<td>安全性</td>
<td>一般</td>
<td>一般</td>
<td>较好</td>
</tr>
<tr>
<td>健壮性</td>
<td>差，不支持symmentric型NAT</td>
<td>好，支持所有类型的NAT</td>
<td>好，适用与所有NAT及NAT拓扑类型，且由于存在中继服务器，NAT 穿透一般总是能成功</td>
</tr>
<tr>
<td>穿透一般总是能成功其他</td>
<td>支持自动检测NAT类型，使用户即使在使用STUN协议无法实现NAT穿透时还可以根据NAT类型自主选择其他可使用的NAT穿透方案</td>
<td>与P2P穿透方式相比，性能是relay穿透方式的弱点。另外TURN无法实现负载分担，解决的方式是把media relay服务器的分配工作放在 SIP proxy完成</td>
</tr>
</tbody>
</table>
<h1 id="小知识点"><a href="#小知识点" class="headerlink" title="小知识点"></a>小知识点</h1><h2 id="GAE"><a href="#GAE" class="headerlink" title="GAE"></a>GAE</h2><p>Google App Engine<br>谷歌的Web应用开发、托管平台。支持Python、Java和Php。</p>
<h2 id="HLS-HTTP-Live-Streaming"><a href="#HLS-HTTP-Live-Streaming" class="headerlink" title="HLS(HTTP Live Streaming)"></a>HLS(HTTP Live Streaming)</h2><p><a href="https://en.wikipedia.org/wiki/HTTP_Live_Streaming" target="_blank" rel="noopener">https://en.wikipedia.org/wiki/HTTP_Live_Streaming</a><br><a href="https://baike.baidu.com/item/HLS/8328931" target="_blank" rel="noopener">https://baike.baidu.com/item/HLS/8328931</a></p>
<h2 id="H-264"><a href="#H-264" class="headerlink" title="H.264"></a>H.264</h2><p>国际上制定视频编解码技术的组织有两个，一个是“国际电联（ITU-T）”，它制定的标准有H.261、H.263、H.263+等，另一个是“国际标准化组织（ISO）”它制定的标准有MPEG-1、MPEG-2、MPEG-4等。而H.264则是由两个组织联合组建的联合视频组（JVT）共同制定的新数字视频编码标准，所以它既是ITU-T的H.264，又是ISO/IEC的MPEG-4高级视频编码（Advanced Video Coding，AVC）的第10 部分。因此，不论是MPEG-4 AVC、MPEG-4 Part 10，还是ISO/IEC 14496-10，都是指H.264。</p>
<h2 id="Scaledrone"><a href="#Scaledrone" class="headerlink" title="Scaledrone"></a>Scaledrone</h2><p>Scaledrone is a realtime messaging service and platform. Send live updates, create chatrooms and collaborative tools.</p>
<p>一个平台。<br>这是这个平台的Demo<br><a href="https://scaledrone.github.io/webrtc/index.html#12345房间号" target="_blank" rel="noopener">https://scaledrone.github.io/webrtc/index.html#12345房间号</a>   貌似不太行啊。</p>
<p><a href="https://www.scaledrone.com/blog/webrtc-tutorial-simple-video-chat/" target="_blank" rel="noopener">https://www.scaledrone.com/blog/webrtc-tutorial-simple-video-chat/</a><br>基础教学</p>
<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>了解了打洞的定义。路还很长啊。</p>

            </div>
            <hr>

            

            <link rel="stylesheet" type="text/css" href="/libs/share/css/share.min.css">

<div id="article-share">
    
    <div class="social-share" data-disabled="qzone" data-wechat-qrcode-helper="<p>微信里点“发现”->“扫一扫”二维码便可查看分享。</p>"></div>
    
</div>

<script src="/libs/share/js/social-share.min.js"></script>

            <div class="reprint">
                <p>
                    <span class="reprint-tip">转载请注明: </span>
                    <a href="https://xuanshan.gitee.io" class="b-link-green">炫杉</a>
                    <i class="fa fa-angle-right fa-lg fa-fw text-color"></i>
                    <a href="/WebRTC/WebRTC02查资料/" class="b-link-green">WebRTC02查基础资料</a>
                </p>
            </div>
        </div>
    </div>

    

    

    

    
    <div class="livere-card card" data-aos="fade-up">
    <!-- 来必力City版安装代码 -->
    <div id="lv-container" class="card-content" data-id="city" data-uid="MTAyMC8yOTg2My82NDI5">
        <script type="text/javascript">
            (function (d, s) {
                let j, e = d.getElementsByTagName(s)[0];
                if (typeof LivereTower === 'function') {
                    return;
                }

                j = d.createElement(s);
                j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
                j.async = true;

                e.parentNode.insertBefore(j, e);
            })(document, 'script');
        </script>
        <noscript>为正常使用来必力评论功能请激活JavaScript。</noscript>
    </div>
    <!-- City版安装代码已完成 -->
</div>
    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">上一篇</div>
            <div class="card">
                <a href="/WebRTC/WebRTC03入门教程01/">
                    <div class="card-image">
                        
                        
                        <img src="/medias/featureimages/2.jpg" class="responsive-img" alt="WebRTC03入门教程01">
                        
                        <span class="card-title">WebRTC03入门教程01</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary">WebRTC教程

HomeWebRTC（网页实时通讯）技术可以很容易地让人们在网页实现音频、视频连接。这个教程中，我们会解释如何用WebRTC快速建立一个peer-to-peer的连接。
受众开发者。条件WebRTC用于赋予浏览器和移动A</div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <i class="fa fa-clock-o fa-fw icon-date"></i>2018-08-27
                        </span>
                        <span class="publish-author">
                            
                            <i class="fa fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/WebRTC/" class="post-category" target="_blank">
                                    WebRTC
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/tutorial/" target="_blank">
                        <span class="chip bg-color">tutorial</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">下一篇</div>
            <div class="card">
                <a href="/WebRTC/WebRTC01iOSDemo/">
                    <div class="card-image">
                        
                        
                        <img src="/medias/featureimages/19.jpg" class="responsive-img" alt="WebRTC01iOS_Demo">
                        
                        <span class="card-title">WebRTC01iOS_Demo</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary">为我的WebRTC第一站做个记录吧。先了解下应用层的东西。

我发现，我这些学习笔记一点都不技术，跟我的流水账日记差不多～哈哈。管不了这么多了。我的现阶段，这个水平。写博客就是为了记录我学习的过程。大体了解WebRTC，里面涉及的东西真的～</div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="fa fa-clock-o fa-fw icon-date"></i>2018-08-24
                            </span>
                        <span class="publish-author">
                            
                            <i class="fa fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/WebRTC/" class="post-category" target="_blank">
                                    WebRTC
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/Note/" target="_blank">
                        <span class="chip bg-color">Note</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
    </div>
</article>
</div>
    </div>
    <div class="col l3 hide-on-med-and-down">
        <div class="toc-widget">
            <div class="toc-title">目录</div>
            <div id="toc-content">

            </div>
        </div>
    </div>
</div>

<script src="/libs/tocbot/tocbot.min.js"></script>
<script>
    $(function () {
        tocbot.init({
            tocSelector: '#toc-content',
            contentSelector: '#articleContent',
            headingSelector: 'h1,h2, h3, h4'
        });

        // modify the toc link href to support Chinese.
        let i = 0;
        let tocHeading = 'toc-heading-';
        $('#toc-content a').each(function () {
            $(this).attr('href', '#' + tocHeading + (++i));
        });

        // modify the heading title id to support Chinese.
        i = 0;
        $('#articleContent').children('h1,h2, h3, h4').each(function () {
            $(this).attr('id', tocHeading + (++i));
        });

        // Set scroll toc fixed.
        let tocHeight = parseInt($(window).height() * 0.4 - 64);
        let $tocWidget = $('.toc-widget');
        $(window).scroll(function () {
            let scroll = $(window).scrollTop();
            /* add post toc fixed. */
            if (scroll > tocHeight) {
                $tocWidget.addClass('toc-fixed');
            } else {
                $tocWidget.removeClass('toc-fixed');
            }
        });
    });
</script>
    

</main>

<footer class="page-footer bg-color">
    <div class="container row center-align">
        <div class="col s12 m8 l8 copy-right">
            &copy;<a href="https://o--o.win" target="_blank">炫杉2018</a> 
            <a href="https://hexo.io/" target="_blank">Hexo</a> 强力驱动
              主题 <a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">matery</a>        </div>
        <div class="col s12 m4 l4 social-link"><a href="https://github.com/ixsim" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
    <i class="fa fa-github"></i>
</a>

<a href="mailto:chenjiayin1990@163.com" class="tooltipped" target="_blank" data-tooltip="邮件:chinalixs@qq.com" data-position="top" data-delay="50">
    <i class="fa fa-envelope-open"></i>
</a>

<a href="http://wpa.qq.com/msgrd?v=3&uin=6956820&site=qq&menu=yes" class="tooltipped" data-tooltip="QQ: 6956820" data-position="top" data-delay="50">
    <i class="fa fa-qq"></i>
</a>
</div>
    </div>
</footer>

<div class="progress-bar"></div>


<!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title">搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字" class="search-input" autofocus>
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script src="/js/search.js"></script>
<script type="text/javascript">
    searchFunc("/" + "search.xml", 'searchInput', 'searchResult');
</script>
<!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fa fa-angle-up"></i>
    </a>
</div>


<script src="/libs/materialize/js/materialize.min.js"></script>
<script src="/libs/masonry/masonry.pkgd.min.js"></script>
<script src="/libs/aos/aos.js"></script>
<script src="/libs/scrollprogress/scrollProgress.min.js"></script>
<script src="/libs/lightGallery/js/lightgallery-all.min.js"></script>
<script src="/js/matery.js"></script>
</body>
</html>